<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { reactive } from "vue";
const option = reactive({
  tooltip: {
    // confine: true,
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter: '{b0}<br>{a0}: {c0}',
  },
  // animation: true,
  grid: {
    top: '10%',
    bottom: '20%',
    right: '10%',
    left: '10%',
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    axisLine: {
      lineStyle: {
        color: '#0a3e98'
      }
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      lineStyle: {
        color: '#eee',
        type: "dotted",
      }
    },
    axisLabel: {
      show: true,
      margin: 14,
      fontSize: 14,
      color: '#fff',
    },
  },
  yAxis: [
    {
      name: '',
      nameTextStyle: {
        fontSize: 11,
        color: '#BAE7FF',
      },
      splitArea: {
        show: false,
      },
      type: 'value',
      gridIndex: 0,
      minInterval: 1,
      // max: 100,
      // interval: 25,
      // splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.2)',
          type: "dotted",
        }
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#0a3e98'
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,
        color: '#fFF',
      },
    },
  ],
  series: [
    {
      name: '活动数量',
      type: 'bar',
      barWidth: 22,
      itemStyle: {
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#1EE7E7',
              },
              {
                offset: 0.8,
                color: '#1890FF',
              },
            ],
          },
        },
      },
      data: [47, 46, 51, 46, 44, 50, 10],
      z: 10,
      zlevel: 0,
    },
    {
      // 分隔
      type: 'pictorialBar',
      itemStyle: {
        normal: {
          color: 'rgba(24, 27, 36, 0.63)',
        },
      },
      symbolRepeat: 'fixed',
      symbolMargin: 4,
      symbol: 'rect',
      symbolClip: true,
      symbolSize: [22, 5],
      symbolPosition: 'start',
      symbolOffset: [1, 1],
      data: [47, 46, 51, 46, 44, 50, 10],
      width: 2,
      z: 0,
      zlevel: 1,
    },
    {
      name: '外框',
      type: 'bar',
      barGap: '-110%', // 设置外框粗细
      barWidth: 22,
      itemStyle: {
        normal: {
          color: 'transparent', // 填充色
          // barBorderRadius: 0, //圆角半径
          label: {
            // 标签显示位置
            show: false,
            position: 'top', // insideTop 或者横向的 insideLeft
          },
        },
      },
      z: 0,
    },
  ],

});
</script>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
